<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 引入 Element UI 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        /* 整体页面背景 */
        body {
            font-family: 'Roboto', sans-serif; /* 使用更具科技感的字体 */
            background: linear-gradient(to bottom, #000000, #1a1a1a); /* 渐变背景，从黑色到深灰色，营造深邃感 */
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden; /* 隐藏页面溢出部分，保持整体整洁 */
            color: #fff; /* 文字颜色设为白色，与深色背景对比明显 */
        }

        /* 发布微博的整体容器样式 */
      .post-container {
            background-color: rgba(30, 30, 30, 0.8); /* 半透明的深色容器背景 */
            border-radius: 15px; /* 加大圆角半径，更显圆润科幻感 */
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.4), 0 0 40px rgba(0, 255, 255, 0.3) inset; /* 蓝色外发光和内发光效果 */
            padding: 30px;
            width: 450px;
            animation: fadeIn 0.5s ease; /* 入场动画，淡入效果 */
            position: relative; /* 相对定位，方便内部元素绝对定位 */
        }

        /* 定义淡入动画关键帧 */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        /* 标题样式 */
      .post-title {
            color: #00ffff; /* 青蓝色标题，科幻风格常见颜色 */
            font-size: 24px;
            margin-top: 0;
            margin-bottom: 20px;
            text-align: center;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); /* 文字阴影，增强立体感 */
            animation: titleGlow 1.5s infinite alternate; /* 标题闪烁动画 */
        }

        /* 定义标题闪烁动画关键帧 */
        @keyframes titleGlow {
            from {
                text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
            }

            to {
                text-shadow: 0 0 20px rgba(0, 255, 255, 1);
            }
        }

        /* 文本输入框样式 */
        #weibo-textarea {
            width: 100%;
            height: 180px;
            border: 1px solid rgba(0, 255, 255, 0.3); /* 淡蓝色边框 */
            border-radius: 10px;
            padding: 15px;
            resize: none;
            margin-bottom: 20px;
            background-color: rgba(0, 0, 0, 0.3); /* 半透明黑色背景 */
            color: #fff;
            transition: border-color 0.3s ease; /* 边框颜色过渡效果 */
        }

        #weibo-textarea:focus {
            border-color: #00ffff; /* 获取焦点时边框变为青蓝色 */
            outline: none; /* 去除默认的聚焦外框 */
        }

        /* 按钮组样式 */
      .button-group {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
        }

        /* 发布按钮样式 */
      .submit-btn {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 25px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease; /* 背景色和缩放过渡效果 */
            position: relative; /* 相对定位，方便添加伪元素做特效 */
            overflow: hidden; /* 隐藏超出按钮范围的内容 */
            animation: buttonGlow 2s infinite; /* 按钮发光动画 */
        }

        /* 定义按钮发光动画关键帧 */
        @keyframes buttonGlow {
            0% {
                box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
            }

            50% {
                box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
            }

            100% {
                box-shadow: 0 0 10px rgba(0, 255, 255, 0.6);
            }
        }

        /* 发布按钮 hover 效果及点击效果 */
       .submit-btn:hover {
            background-color: #0056b3;
            transform: scale(1.05); /* 鼠标悬停时放大 */
        }

       .submit-btn:active::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background-color: rgba(0, 255, 255, 0.2); /* 点击时的发光效果 */
            border-radius: 50%;
            opacity: 0;
            animation: ripple 0.6s ease-out; /* 点击发光动画 */
        }

        /* 定义点击发光动画关键帧 */
        @keyframes ripple {
            0% {
                transform: scale(0);
                opacity: 1;
            }

            100% {
                transform: scale(1);
                opacity: 0;
            }
        }

        /* 取消按钮样式 */
      .cancel-btn {
            background-color: #666;
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 25px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s ease;
            position: relative;
            overflow: hidden;
        }

        /* 取消按钮 hover 效果 */
       .cancel-btn:hover {
            background-color: #444;
            transform: scale(1.05);
        }

    </style>
</head>

<body>
    <div id="app">
        <div class="post-container">
            <!-- 标题部分 -->
            <h2 class="post-title">发布微博</h2>
            <textarea id="weibo-textarea" cols="30" rows="10" placeholder="分享此刻的想法..."
                v-model="weibo.content"></textarea>
            <div class="button-group">
                <input type="button" value="发微博" class="submit-btn" @click="insert()">
                <input type="button" value="取消" class="cancel-btn" @click="cancel()">
            </div>
        </div>
    </div>
    <!-- 引入 axios 库 -->
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <!-- 引入 Vue 框架 -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
    <!-- 引入 Element UI 库 -->
    <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
    <script>
        let v = new Vue({
            el: '#app',
            data: function () {
                return {
                    weibo: { content: "" }
                }
            },
            methods: {
                insert() {
                    // 可以在这里添加一些表单验证逻辑，比如判断内容是否为空等
                    if (!this.weibo.content.trim()) {
                        alert("微博内容不能为空，请输入内容后再发布。");
                        return;
                    }
                    axios.post("/v1/weibo/insert", this.weibo).then((response) => {
                        if (response.data == 1) {
                            location.href = "/";// 回到首页
                        } else {
                            alert("请先登录!");
                            location.href = "/login.html";
                        }
                    }).catch((error) => {
                        console.error("发布微博请求出错:", error);
                        alert("发布微博时出现错误，请稍后再试。");
                    });
                },
                cancel() {
                    // 可以在这里添加取消操作的逻辑，比如清空文本框内容等
                    this.weibo.content = "";
                }
            }
        });
    </script>
</body>

</html>